<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="项目区域进度表"
        data-page-identification="n_shwei9snen"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_3uhb02odw3 自定义模板_vene908p7u -->
            <!--          修改年度目标-->
            <a-modal
                :visible="state.changeTargetVisible"
                :mask-closable="false"
                title="修改目标"
                @cancel="state.changeTargetVisible = false"
                @ok="confirmTarget"
                centered
                width="800px"
                :ok-button-props="{ loading: state.changeTargetLoading }"
                :body-style="{ maxHeight: '700px', overflowY: 'auto', paddingBottom: '0px' }"
            >
                <div class="target-form">
                    <a-form :model="state.changeTargetFrom">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="年度目标">
                                    <a-textarea
                                        :autosize="{ minRows: 2, maxRows: 5 }"
                                        v-model:value="state.changeTargetFrom.yearGoals"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="Q1目标">
                                    <a-textarea
                                        :autosize="{ minRows: 2, maxRows: 5 }"
                                        v-model:value="state.changeTargetFrom.q1Goals"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="Q2目标">
                                    <a-textarea
                                        :autosize="{ minRows: 2, maxRows: 5 }"
                                        v-model:value="state.changeTargetFrom.q2Goals"
                                    />
                                </a-form-item>
                            </a-col>

                            <a-col :span="24">
                                <a-form-item label="Q3目标">
                                    <a-textarea
                                        :autosize="{ minRows: 2, maxRows: 5 }"
                                        v-model:value="state.changeTargetFrom.q3Goals"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="Q4目标">
                                    <a-textarea
                                        :autosize="{ minRows: 2, maxRows: 5 }"
                                        v-model:value="state.changeTargetFrom.q4Goals"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          修改年度目标-->
            <!--          修改周汇报-->
            <a-modal
                :visible="state.changeWeekVisible"
                :title="state.changeWeekTitle"
                @cancel="state.changeWeekVisible = false"
                @ok="confirmWeek"
                :ok-button-props="{ loading: state.changeWeekLoading }"
                centered
            >
                <a-textarea v-model:value="state.changeWeekValue" :rows="8" />
            </a-modal>
            <!--          修改周汇报-->
            <!--          展示设置-->
            <a-modal
                :visible="state.settingVisible"
                title="配置"
                centered
                @cancel="state.settingVisible = false"
                :footer="null"
                :body-style="{
                    paddingTop: '0px'
                }"
            >
                <div class="check-target">
                    <a-checkbox-group v-model:value="state.targetChecked" :options="state.targetList" />
                </div>
                <div>
                    <a-radio-group v-model:value="selectedMonth" @change="onMonthChange" style="width: 100%">
                        <a-row>
                            <a-col
                                :span="4"
                                v-for="(month, index) in months"
                                :key="month"
                                :style="{
                                    marginBottom: index > 6 ? '0' : '16px'
                                }"
                            >
                                <a-radio :value="month">{{ month }}月</a-radio>
                            </a-col>
                        </a-row>
                    </a-radio-group>
                </div>
            </a-modal>
            <!--          展示设置-->
            <!--          关联项目-->
            <a-modal
                :visible="state.associateVisible"
                title="关联项目"
                centered
                @ok="confirmassociate"
                width="800px"
                @cancel="state.associateVisible = false"
                :ok-button-props="{ loading: state.associateLoading }"
                :body-style="{
                    paddingBottom: '0px'
                }"
            >
                <a-form :model="state.associatedProjectList" ref="associatedRef">
                    <div class="my-page">
                        <div class="module-item" v-for="(item, index) in state.associatedProjectList" :key="index">
                            <div class="form-content">
                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="项目名称"
                                            :rules="[{ required: true, message: '请选择项目！', trigger: 'blur' }]"
                                            :name="[index, 'projectSprintId']"
                                            :labelCol="{ span: 8 }"
                                            :wrapperCol="{ span: 16 }"
                                        >
                                            <a-select
                                                show-search
                                                v-model:value="state.associatedProjectList[index].projectSprintId"
                                                :options="state.glProjectList"
                                                allow-clear
                                                placeholder="请选择"
                                                @focus="getGlProjectList"
                                                :field-names="{ label: 'projectName', value: 'projectId' }"
                                                :filter-option="
                                                    (input, option) => {
                                                        return (
                                                            option.projectName
                                                                .toLowerCase()
                                                                .indexOf(input.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                            />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item
                                            label="季度/月份"
                                            :rules="[{ required: true, message: '请选择季度/月份！', trigger: 'blur' }]"
                                            :name="[index, 'month']"
                                            :labelCol="{ span: 8 }"
                                            :wrapperCol="{ span: 16 }"
                                        >
                                            <a-tree-select
                                                v-model:value="state.associatedProjectList[index].month"
                                                show-search
                                                style="width: 100%"
                                                placeholder="请选择"
                                                allow-clear
                                                :tree-data="state.jdList"
                                                :fieldNames="{
                                                    children: 'children',
                                                    label: 'nodeName',
                                                    value: 'nodeName',
                                                    key: 'nodeCode'
                                                }"
                                                :filterTreeNode="
                                                    (inputValue, treeNode) => {
                                                        return (
                                                            treeNode.nodeName
                                                                .toLowerCase()
                                                                .indexOf(inputValue.toLowerCase()) >= 0
                                                        )
                                                    }
                                                "
                                                :max-tag-count="1"
                                                @focus="getjd"
                                            />
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </div>

                            <a class="add-btn" @click="handlerAddFormItem(index)">下方插入</a>
                            <a class="del" @click="handlerDeleteFormItem(index)">删除</a>
                        </div>
                    </div>
                </a-form>
            </a-modal>
            <!--          关联项目-->
            <a-modal
                :visible="state.modalVisible"
                title="甘特图"
                width="100%"
                centered
                @cancel="ganteCancel"
                :footer="null"
                :mask-closable="false"
                destroy-on-close
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
            >
                <div class="modal-title">
                    <div class="left">
                        <a-radio-group v-model:value="state.radioValue" @change="radioChange">
                            <a-radio-button value="项目">项目</a-radio-button>
                            <a-radio-button value="目标">目标</a-radio-button>
                        </a-radio-group>
                        <div class="tip-color"> 计划进展 <div class="box1"></div> </div>
                        <div class="tip-color"> 实际进展正常完成 <div class="box2"></div> </div>
                        <div class="tip-color"> 实际进展延期或延期完成 <div class="box3"></div> </div>
                    </div>
                    <div class="right">
                        <div class="right-tip" v-if="state.radioValue === '项目'">
                            <a-form-item label="项目名称">
                                <a-select
                                    show-search
                                    style="width: 200px; overflow: hidden"
                                    :options="state.projectList"
                                    allow-clear
                                    placeholder="请选择"
                                    :field-names="{ label: 'projectName', value: 'projectId' }"
                                    :filter-option="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    v-model:value="state.gantFilter.projectId"
                                    @change="getGantData"
                                />
                            </a-form-item>
                        </div>

                        <div class="right-tip" v-if="state.radioValue === '目标'">
                            <a-form-item
                                label="月份"
                                :labelCol="{ span: 8 }"
                                :wrapperCol="{ span: 16 }"
                                style="height: 32px; width: 300px"
                                name="month"
                            >
                                <a-date-picker
                                    @change="getGantData"
                                    picker="month"
                                    style="width: 100%"
                                    v-model:value="state.gantFilter.month"
                                    value-format="YYYY-MM"
                                    :allow-clear="false"
                                />
                            </a-form-item>
                        </div>
                        <div class="right-tip">
                            <a-form-item label="任务类型">
                                <a-select
                                    show-search
                                    style="width: 200px; overflow: hidden"
                                    :options="[
                                        {
                                            label: '全部',
                                            value: 'ALL'
                                        },
                                        {
                                            label: '关键路径任务',
                                            value: 'KEYNOTE'
                                        },
                                        {
                                            label: '其它',
                                            value: ' OTHER'
                                        },
                                        {
                                            label: 'SOP任务',
                                            value: 'SOP'
                                        }
                                    ]"
                                    allow-clear
                                    placeholder="请选择"
                                    :max-tag-count="1"
                                    v-model:value="state.gantFilter.taskType"
                                    @change="getGantData"
                                />
                            </a-form-item>
                        </div>
                        <a-button type="primary" @click="resetGant"> 重置 </a-button>

                        <a-button type="primary" @click="scrollToTodayColumn">今天</a-button>
                    </div>
                </div>
                <div class="kb-table-box">
                    <a-table
                        bordered
                        :pagination="false"
                        :columns="state.kbColumns"
                        :data-source="state.kbDataSource"
                        :scroll="{ x: 'max-content', y: 600 }"
                        ref="kbTbRef"
                        :loading="state.gantLoading"
                        rowKey="key"
                        @resizeColumn="handleTaskResizeColumn"
                    >
                        <template #headerCell="{ title, column }">
                            <template v-if="column.today">
                                <div class="colun-today"
                                    >{{ title }}
                                    <div class="today-line"></div>
                                    <div class="today-flag">今天</div>
                                </div>
                            </template>
                        </template>
                        <template #bodyCell="{ column, record, text }">
                            <template
                                v-if="
                                    ![
                                        '项目名称',
                                        '月份',
                                        '总目标',
                                        '子目标',
                                        '项目阶段',
                                        '任务名称',
                                        '任务状态',
                                        '计划开始',
                                        '计划结束',
                                        '负责人'
                                    ].includes(column.title)
                                "
                            >
                                <div class="color-div" v-if="text">
                                    <div
                                        class="div-item"
                                        :style="{
                                            backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                        }"
                                    ></div>
                                    <div class="line-table" v-if="text.today"></div>
                                    <div
                                        class="div-item"
                                        :style="{
                                            backgroundColor: getColor(text.actual)
                                        }"
                                    >
                                    </div>
                                </div>
                                <div v-else class="color-div">
                                    <div class="div-item"></div>
                                    <div class="line-table" v-if="column.today"></div>
                                    <div class="div-item"> </div>
                                </div>
                            </template>
                            <template v-if="column.title === '项目阶段'">
                                <div class="default-gant-title-xmjd" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                                }}</div>
                            </template>
                            <template v-if="column.title === '任务名称'">
                                <div class="default-gant-title-rwmc" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                                }}</div>
                            </template>
                            <template v-if="column.title === '总目标'">
                                <div class="default-gant-title-total" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                                }}</div>
                            </template>
                            <template v-if="column.title === '子目标'">
                                <div class="default-gant-title-zmb" :title="record[column.dataIndex]">{{
                                    record[column.dataIndex]
                                }}</div>
                            </template>
                        </template>
                    </a-table>
                </div>
            </a-modal>
            <div class="body">
                <div class="top-search">
                    <a-row style="height: 32px">
                        <a-col :span="5" style="height: 32px">
                            <a-form-item label="年份" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                                <a-date-picker
                                    v-model:value="state.searchForm.dateYear"
                                    picker="year"
                                    style="width: 100%"
                                    value-format="YYYY"
                                    :allow-clear="false"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5" style="height: 32px">
                            <a-form-item label="项目名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    mode="multiple"
                                    v-model:value="state.searchForm.projectIdList"
                                    placeholder="请选择"
                                    :options="state.searchProjectList"
                                    :field-names="{ label: 'projectName', value: 'projectId' }"
                                    :filter-option="
                                        (input, option) => {
                                            return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                    :max-tag-count="1"
                                    allow-clear
                                    show-search
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5" style="height: 32px">
                            <a-form-item label="项目类型" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                                <a-select
                                    placeholder="请选择"
                                    v-model:value="state.searchForm.projectType"
                                    :options="[
                                        {
                                            label: '平台',
                                            value: '平台'
                                        },
                                        {
                                            label: '交付',
                                            value: '交付'
                                        }
                                    ]"
                                    allow-clear
                                    show-search
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" style="height: 32px">
                            <a-form-item label="任务负责人" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
                                <!--                                <a-tree-select-->
                                <!--                                    placeholder="请选择"-->
                                <!--                                    v-model:value="state.searchForm.userList"-->
                                <!--                                    show-search-->
                                <!--                                    style="width: 100%"-->
                                <!--                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"-->
                                <!--                                    allow-clear-->
                                <!--                                    multiple-->
                                <!--                                    treeDefaultExpandAll-->
                                <!--                                    :tree-data="userListData"-->
                                <!--                                    tree-node-filter-prop="name"-->
                                <!--                                    :field-names="{-->
                                <!--                                        children: 'children',-->
                                <!--                                        label: 'name',-->
                                <!--                                        value: 'name'-->
                                <!--                                    }"-->
                                <!--                                />-->
                                <a-tree-select
                                    placeholder="请选择"
                                    v-model:value="state.searchForm.userList"
                                    show-search
                                    style="width: 100%"
                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                    allow-clear
                                    multiple
                                    treeDefaultExpandAll
                                    :tree-data="userListData"
                                    tree-node-filter-prop="label"
                                    :maxTagCount="2"
                                    :field-names="{
                                        children: 'children',
                                        label: 'label',
                                        value: 'value'
                                    }"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="3" style="height: 32px; display: flex; justify-content: end">
                            <a-space>
                                <a-button type="primary" @click="getData(true)">查询</a-button>
                                <a-button type="primary" ghost @click="resetData">重置</a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </div>
                <div class="bottom-div">
                    <div class="bottom-title">
                        <div class="table-top-title">
                            <div>项目列表</div>
                        </div>
                        <div style="display: flex; gap: 16px">
                            <div class="tip-color"> 计划进展 <div class="box1"></div> </div>
                            <div class="tip-color"> 实际进展正常完成 <div class="box2"></div> </div>
                            <div class="tip-color"> 实际进展延期或延期完成 <div class="box3"></div> </div>
                            <a-space style="position: relative">
                                <a-button type="primary" @click="showSetting">显示设置</a-button>
                                <a-button type="primary" @click="handleExpandAll" v-if="!state.isExpandAll"
                                    >全部展开
                                </a-button>
                                <a-button type="primary" @click="handleCollapseAll" v-else>全部折叠</a-button>
                            </a-space>
                        </div>
                    </div>
                    <div class="no-data-img" v-if="state.tableData.length == 0">
                        <div class="no-data-msg">暂无数据</div>
                    </div>
                    <a-spin :spinning="state.tableLoading" tip="加载中...">
                        <div class="scroll-content">
                            <div class="gd-item" v-for="(item, index) in state.tableData" :key="item.projectId">
                                <a-collapse
                                    :bordered="false"
                                    expandIconPosition="right"
                                    v-model:activeKey="state.collapseKey"
                                    collapsible="disabled"
                                >
                                    <template #expandIcon="{ isActive }"></template>
                                    <a-collapse-panel :key="item.projectId">
                                        <template #header>
                                            <div class="collapse-title">
                                                <div class="collapse-title-left">
                                                    <div class="title-icon"></div>
                                                    <div class="title-text">{{ item.projectName }}</div>
                                                </div>
                                                <div class="father-right">
                                                    <div class="father-bottom" @click.stop="onClick">
                                                        <div class="father-right-btn">
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                @click="showChangeTarget(item)"
                                                                >编辑
                                                            </a-button>
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                @click="showAssociate(item)"
                                                                >关联项目
                                                            </a-button>
                                                            <a-button
                                                                type="primary"
                                                                ghost
                                                                size="small"
                                                                class="btn-item"
                                                                @click="showGant(item)"
                                                                >甘特图
                                                            </a-button>
                                                            <div
                                                                @click="toggleCollapse(item.projectId)"
                                                                class="active-btn"
                                                            >
                                                                <span style="color: #3875ff; cursor: pointer">{{
                                                                    isActive(item.projectId) ? '收起' : '展开'
                                                                }}</span>
                                                                <DoubleLeftOutlined
                                                                    v-if="isActive(item.projectId)"
                                                                    class="active-icon"
                                                                />
                                                                <DoubleRightOutlined v-else class="active-icon" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                        <!--                           列表父工单-->
                                        <div class="item-inner">
                                            <div class="inner-item" v-if="state.targetChecked.includes('年度目标')">
                                                <div class="item-left">年度目标：</div>
                                                <div class="item-right">{{ item.yearGoals }}</div>
                                            </div>
                                            <div class="inner-item" v-if="state.targetChecked.includes('季度目标')">
                                                <div class="item-left"
                                                    >{{ monthToQuarter[selectedMonth] }}季度目标：</div
                                                >
                                                <div class="item-right">{{ getQuarterGoals(item.quarterGoals) }}</div>
                                            </div>
                                            <div class="inner-item" v-if="selectedMonth">
                                                <div class="item-left">{{ selectedMonth }}月目标：</div>
                                                <div class="item-right" v-html="formattedMonthGoals(item.monthGoals)">
                                                </div>
                                            </div>
                                            <div class="target-table">
                                                <a-table
                                                    :columns="formatColumns(item.columns)"
                                                    :data-source="handleExpendData(item.projectTaskDtoList)"
                                                    bordered
                                                    :scroll="{ x: 'max-content' }"
                                                    :pagination="false"
                                                    @resizeColumn="handleResizeColumn"
                                                >
                                                    <template #bodyCell="{ column, record, text }">
                                                        <!-- 展开/折叠按钮 -->
                                                        <template v-if="column.dataIndex === 'opration'">
                                                            <a-button type="link" @click="toggleExpand1(record)">
                                                                {{ record.expanded ? '折叠' : '展开' }}
                                                            </a-button>
                                                        </template>
                                                        <template
                                                            v-if="
                                                                column.dataIndex === 'taskName' ||
                                                                column.dataIndex === 'taskDesc' ||
                                                                column.dataIndex === 'subGoalName' ||
                                                                column.dataIndex === 'taskStatus'
                                                            "
                                                        >
                                                            <div
                                                                v-html="formatText(text)"
                                                                :style="{
                                                                    height: record.expanded ? 'auto' : '20px',
                                                                    overflow: 'hidden',
                                                                    whiteSpace: 'normal',
                                                                    textOverflow: 'ellipsis',
                                                                    textAlign:
                                                                        column.dataIndex === 'subGoalName'
                                                                            ? 'center'
                                                                            : 'left',

                                                                    fontWeight:
                                                                        column.title === '子目标' ? '600' : '400'
                                                                }"
                                                            ></div>
                                                        </template>

                                                        <template
                                                            v-if="
                                                                ![
                                                                    '子目标',
                                                                    '关键路径任务',
                                                                    '任务状态',
                                                                    '任务备注',
                                                                    '操作'
                                                                ].includes(column.title)
                                                            "
                                                        >
                                                            <div class="color-div" v-if="text">
                                                                <div
                                                                    class="div-item"
                                                                    :style="{
                                                                        backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                                                    }"
                                                                ></div>
                                                                <div class="line-table" v-if="text.today"></div>
                                                                <div
                                                                    class="div-item"
                                                                    :style="{
                                                                        backgroundColor: getColor(text.actual)
                                                                    }"
                                                                >
                                                                </div>
                                                            </div>
                                                            <div v-else class="color-div">
                                                                <div class="div-item"></div>
                                                                <div class="line-table" v-if="column.today"></div>
                                                                <div class="div-item"> </div>
                                                            </div>
                                                        </template>
                                                        <!-- 其他列的内容 -->
                                                    </template>
                                                </a-table>
                                            </div>
                                        </div>

                                        <!--                           列表父工单-->
                                    </a-collapse-panel>
                                </a-collapse>
                            </div>
                        </div>
                    </a-spin>
                </div>
            </div>
            <!-- end vid_3uhb02odw3 自定义模板_vene908p7u -->
            <!-- begin vid_c84l04d0cx 图片_e87qwsnc38 -->
            <al-image
                v-if="false"
                class="vid_c84l04d0cx"
                :emptyImgSrc="''"
                :src="vid_c84l04d0cx_props.src"
            />
            <!-- end vid_c84l04d0cx 图片_e87qwsnc38 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'

    import UserTableRecords from '@/model/UserTableRecords'
    import { getAppBaseUrl } from '@/utils/index'
    import { sendToken } from '@/hooks/useIframeToken'
    import { useSystemStore } from '@/store/modules/system'
    const systemStore = useSystemStore()

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')
    // 图片 http://10.40.0.33:9001/file-storage/480680058727917568.png
    import vid_c84l04d0cx_imageUrl from '@/assets/images/d4b4c016f208837768f85da2eaa6ea81.png'

    const vid_c84l04d0cx_props = reactive({
        src: vid_c84l04d0cx_imageUrl
    })

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    import { nextTick } from 'vue'
    const domain = window.location.hostname
    console.log(domain)
    onMounted(() => {
        const currentMonth = dayjs().format('YYYY-MM')
        const currentYear = dayjs().format('YYYY')
        state.searchForm.dateYear = currentYear
        state.weekFilterDate = currentMonth
        const nowMonth = dayjs().format('M')
        let defaultMonth = months.find(item => item === nowMonth)
        if (defaultMonth) {
            selectedMonth.value = defaultMonth
        }
        getSearchProject()
        getData(true)
        getBaseUser()
    })

    const activeKey = ref('1')
    const state = reactive({
        searchForm: {
            dateYear: '',
            projectType: undefined,
            projectIdList: [],
            userList: []
        },
        tableData: [],
        collapseKey: [],
        kbColumns: [],
        gantColumns: [],
        tableLoading: false,
        gantLoading: false,
        weekLoading: false,
        kbDataSource: [],
        radioValue: '项目',
        modalVisible: false,
        settingVisible: false,
        gantFilter: {
            projectId: undefined,
            month: undefined,
            taskType: 'ALL'
        },
        weekFilterDate: undefined,
        weekData: [],
        textareaData: '',
        targetList: [
            {
                label: '年度目标',
                value: '年度目标'
            },
            {
                label: '季度目标',
                value: '季度目标'
            }
        ],
        targetList: [
            {
                label: '年度目标',
                value: '年度目标'
            },
            {
                label: '季度目标',
                value: '季度目标'
            }
        ],
        targetChecked: ['年度目标', '季度目标'],

        associatedProjectList: [],
        associateVisible: false,
        jdList: [],
        projectList: [],
        glProjectList: [],
        searchProjectList: [],
        settingLoading: false,
        associateLoading: false,
        changeWeekVisible: false,
        changeWeekTitle: '',
        changeWeekValue: '',
        changeWeekKey: '',
        changeWeekLoading: false,
        currentWeekData: {},
        changeTargetVisible: false,
        changeTargetFrom: {
            'yearGoals': '',
            'q1Goals': '',
            'q2Goals': '',
            'q3Goals': '',
            'q4Goals': ''
        },
        changeTargetLoading: false,
        sopFinish: 0,
        taskFinish: 0,
        targetFinish: 0,
        isOver: false,
        isExpandAll: false
    })
    const currentData = ref({})
    const associatedProjectItem = {
        projectSprintId: undefined,
        month: undefined,
        projectId: currentData.value.projectId
    }
    const colorMap = {
        'plan': '#FFE58F',
        'default': '#C7F870',
        'delay': '#FC4C29'
    }

    function getColor(record) {
        if (!record) return '#fff' // 默认值
        return colorMap[record] || '#C7F870' // 如果没有匹配到颜色，则返回默认颜色
    }

    function getSearchProject() {
        // 请求第一个接口
        get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/project/search').then(data => {
            const projectList = data.data

            // 请求第二个接口
            get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/project_display/search').then(data => {
                const projectDisplayList = data.data

                // 合并两个接口数据，筛选出 projectId 匹配的项并合并
                const mergedList = projectList
                    .filter(project =>
                        projectDisplayList.some(displayProject => displayProject.projectId === project.projectId)
                    )
                    .map(project => {
                        const displayProject = projectDisplayList.find(
                            display => display.projectId === project.projectId
                        )
                        return {
                            ...project, // 第一个接口的数据
                            projectSort: displayProject ? displayProject.projectSort : null, // 第二个接口的数据
                            delFlag: displayProject ? displayProject.delFlag : null // 第二个接口的数据
                        }
                    })

                // 将合并后的数据存入 state
                state.searchProjectList = mergedList
            })
        })
    }

    const projectCoumns = ref([
        {
            title: '项目详情',
            align: 'center',
            children: [
                {
                    title: '项目名称',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'projectName',
                    ellipsis: true,
                    customCell: ({ projectRowSpan }) => {
                        return {
                            rowSpan: projectRowSpan
                        }
                    }
                },
                {
                    title: '项目阶段',
                    width: 100,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'milepostName',
                    ellipsis: true,
                    customCell: ({ milepostRowSpan }) => {
                        return {
                            rowSpan: milepostRowSpan
                        }
                    }
                },
                {
                    title: '任务名称',
                    width: 280,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'taskName',
                    ellipsis: true
                },
                {
                    title: '任务状态',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskStatus',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划开始',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'startTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划结束',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'endTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '负责人',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskOwner',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                }
            ]
        }
    ])
    const targetColumns = ref([
        {
            title: '项目详情',
            align: 'center',
            children: [
                {
                    title: '月份',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'month',
                    ellipsis: true,
                    customCell: ({ monthRowSpan }) => {
                        return {
                            rowSpan: monthRowSpan
                        }
                    }
                },
                {
                    title: '总目标',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'goals',
                    resizable: true,
                    ellipsis: true,
                    customCell: ({ goalsRowSpan }) => {
                        return {
                            rowSpan: goalsRowSpan
                        }
                    }
                },
                {
                    title: '子目标',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'projectGoals',
                    resizable: true,
                    ellipsis: true,
                    customCell: ({ projectGoalsRowSpan }) => {
                        return {
                            rowSpan: projectGoalsRowSpan
                        }
                    }
                },
                {
                    title: '项目阶段',
                    width: 100,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'milepostName',
                    ellipsis: true,
                    customCell: ({ milepostRowSpan }) => {
                        return {
                            rowSpan: milepostRowSpan
                        }
                    }
                },
                {
                    title: '任务名称',
                    width: 300,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'taskName',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '任务状态',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskStatus',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划开始',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'startTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划结束',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'endTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '负责人',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskOwner',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                }
            ]
        }
    ])
    const kbTbRef = ref(null)

    function scrollToTodayColumn() {
        const table = kbTbRef.value.$el.querySelector('.ant3-table-body')
        const todayColumnIndex = state.kbColumns.flatMap(col => col.children || col).findIndex(col => col.today)
        if (todayColumnIndex !== -1 && table) {
            const columnWidth = 20 // 假设每列宽度为 50，根据实际列宽度调整

            // 等待渲染完成后进行滚动
            nextTick(() => {
                setTimeout(() => {
                    const headerCells = table.querySelectorAll('.ant-table-thead th')
                    headerCells.forEach((cell, index) => {
                        const column = state.kbColumns[index]
                        if (column.width) {
                            cell.style.width = column.width + 'px'
                        }
                    })
                    table.scrollLeft = todayColumnIndex * columnWidth - 850 // 减去 500 像素的偏移量
                }, 100) // 可以根据需要调整延迟时间（比如 100 毫秒）
            })
        }
    }

    // 获取项目列表
    function getData(flag) {
        state.tableLoading = true
        post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/v3/search', {
            ...state.searchForm,
            month: selectedMonth.value,
            userList: selectedUserIds.value
        })
            .then(data => {
                if (data.code !== 200) {
                    state.tableData = []
                    state.collapseKey = []
                    message.error(data.message)
                    return
                }
                state.tableData = data.data
                console.log(data.data[0].projectId)
                if (flag) {
                    state.collapseKey = [data.data[0].projectId]
                }
            })
            .finally(() => {
                state.tableLoading = false
            })
    }

    function resetData() {
        state.searchForm.dateYear = dayjs().format('YYYY')
        state.searchForm.projectType = undefined
        state.searchForm.projectIdList = []
        getData(true)
    }

    async function showGant(record) {
        state.radioValue = '项目'
        currentData.value = record
        state.modalVisible = true
        await getProjectList()
        getGantData()
    }

    const toolTipStyle = {
        maxWidth: '400px'
    }

    function getGantData() {
        state.gantLoading = true
        //   TODO调甘特图
        post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/gantt/search', {
            projectId: currentData.value.projectId,
            dateYear: state.searchForm.dateYear,
            taskType: state.gantFilter.taskType,
            month: selectedMonth.value,
            monthList: state.gantFilter.month ? [state.gantFilter.month, state.gantFilter.month] : undefined,
            ganttTypeEnum: state.radioValue === '目标' ? 'GOALS' : 'PROJECT',
            sprintId: state.gantFilter.projectId ? state.gantFilter.projectId : null
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    state.kbDataSource = []
                    if (state.radioValue === '项目') {
                        state.kbDataSource = []
                        state.kbColumns = [...projectCoumns.value]
                    } else {
                        state.kbDataSource = []
                        state.kbColumns = [...targetColumns.value]
                    }
                    return
                }
                let columns = data.data.columns.map(item => {
                    return {
                        ...item, // 保留其他字段
                        children: item.children.map(child => ({
                            ...child,
                            width: 20 // 强制设置相同宽度
                        }))
                    }
                })
                state.gantColumns = columns
                // 格式化函数
                const formattedData =
                    (Array.isArray(data.data.dataSource) ? data.data.dataSource : []).map((item, index) => {
                        const { dataMap, ...rest } = item // 分离出 dataMap 和其他字段
                        return {
                            ...rest, // 保留其他字段
                            ...dataMap, // 将 dataMap 展开为直接字段
                            key: item.id || `key-${index}-${Date.now()}` // 如果有 id 字段，则使用 id 作为 key，否则使用索引和时间戳组合生成唯一的 key
                        }
                    }) || []

                state.kbDataSource = formattedData
                if (state.radioValue === '项目') {
                    state.kbDataSource = groupData(state.kbDataSource)
                    state.kbColumns = [...projectCoumns.value, ...state.gantColumns]
                } else {
                    state.kbDataSource = groupTargetData(state.kbDataSource)
                    console.log(state.kbDataSource)
                    state.kbColumns = [...targetColumns.value, ...state.gantColumns]
                }
                state.sopFinish = data.data.sopRatio
                state.taskFinish = data.data.userStoryRatio

                scrollToTodayColumn()
            })
            .finally(() => {
                state.gantLoading = false
            })
    }
    let baseListColumn = ref([
        {
            title: '子目标',
            tilte: '子目标',
            dataIndex: 'subGoalName',
            width: 200,
            customCell: ({ goalsNameRowSpan }) => {
                return {
                    rowSpan: goalsNameRowSpan,
                    style: {
                        padding: '0 16px'
                    }
                }
            }
        },
        {
            title: '关键路径任务',
            tilte: '关键路径任务',
            dataIndex: 'taskName',
            customCell: ({ goalsNameRowSpan }) => {
                return {
                    style: {
                        padding: '0 16px'
                    }
                }
            }
        },
        {
            title: '任务状态',
            tilte: '任务状态',
            dataIndex: 'taskStatus',
            customCell: ({ goalsNameRowSpan }) => {
                return {
                    style: {
                        padding: '0 16px'
                    }
                }
            }
        },
        {
            title: '任务备注',
            tilte: '任务备注',
            dataIndex: 'taskDesc',
            customCell: ({ goalsNameRowSpan }) => {
                return {
                    style: {
                        padding: '0 16px'
                    }
                }
            }
        }
    ])
    function handleExpendData(data) {
        const formattedData =
            (Array.isArray(data) ? data : []).map((item, index) => {
                const { dataMap, ...rest } = item // 分离出 dataMap 和其他字段
                return {
                    ...rest, // 保留其他字段
                    ...dataMap, // 将 dataMap 展开为直接字段
                    key: item.id || `key-${index}-${Date.now()}`, // 如果有 id 字段，则使用 id 作为 key，否则使用索引和时间戳组合生成唯一的 key
                    expanded: true
                }
            }) || []

        return groupListData(formattedData)
    }
    function groupListData(data) {
        if (!data) {
            return
        }
        let currentGoalsNameIndex = ''
        let goalsNameRowSpan = 0

        return data.map((item, index) => {
            // 如果 goalsNameIndex 变化，重置 goalsNameRowSpan，并计算新的 rowSpan
            if (currentGoalsNameIndex !== item.subGoalName) {
                currentGoalsNameIndex = item.subGoalName
                goalsNameRowSpan = 1

                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].subGoalName === item.subGoalName) {
                        goalsNameRowSpan++
                    } else {
                        break
                    }
                }
                item.goalsNameRowSpan = goalsNameRowSpan
            } else {
                item.goalsNameRowSpan = 0
            }
            item.expanded = true
            return item
        })
    }
    function groupData(data) {
        let currentProjectName = ''
        let currentMilepostName = ''
        let projectRowSpan = 0
        let milepostRowSpan = 0

        return data.map((item, index) => {
            // 如果 projectName 变化，重置 projectRowSpan，并计算新的 rowSpan
            if (currentProjectName !== item.projectName) {
                currentProjectName = item.projectName
                projectRowSpan = 1

                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].projectName === item.projectName) {
                        projectRowSpan++
                    } else {
                        break
                    }
                }
                item.projectRowSpan = projectRowSpan
            } else {
                item.projectRowSpan = 0
            }

            // 如果 milepostName 变化，重置 milepostRowSpan，并计算新的 rowSpan
            if (currentMilepostName !== item.milepostName) {
                currentMilepostName = item.milepostName
                milepostRowSpan = 1

                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].milepostName === item.milepostName) {
                        milepostRowSpan++
                    } else {
                        break
                    }
                }
                item.milepostRowSpan = milepostRowSpan
            } else {
                item.milepostRowSpan = 0
            }

            return item
        })
    }

    function groupTargetData(data) {
        let currentMilepostName = ''
        let currentProjectGoals = ''
        let currentGoals = ''
        let currentMonth = ''

        let milepostRowSpan = 0
        let projectGoalsRowSpan = 0
        let goalsRowSpan = 0
        let monthRowSpan = 0

        return data.map((item, index) => {
            let tempProjectGoals = currentProjectGoals
            // 如果 milepostName 和 projectGoals 都变化，重置 milepostRowSpan，并计算新的 rowSpan
            if (currentMilepostName !== item.milepostName || currentProjectGoals !== item.projectGoals) {
                currentMilepostName = item.milepostName
                currentProjectGoals = item.projectGoals
                milepostRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].milepostName === item.milepostName && data[i].projectGoals === item.projectGoals) {
                        milepostRowSpan++
                    } else {
                        break
                    }
                }
                item.milepostRowSpan = milepostRowSpan
            } else {
                item.milepostRowSpan = 0
            }

            // 如果 projectGoals 变化，重置 projectGoalsRowSpan，并计算新的 rowSpan
            if (tempProjectGoals !== item.projectGoals) {
                currentProjectGoals = item.projectGoals
                projectGoalsRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].projectGoals === item.projectGoals) {
                        projectGoalsRowSpan++
                    } else {
                        break
                    }
                }
                item.projectGoalsRowSpan = projectGoalsRowSpan
            } else {
                item.projectGoalsRowSpan = 0
            }

            // 如果 goals 变化，重置 goalsRowSpan，并计算新的 rowSpan
            if (currentGoals !== item.goals) {
                currentGoals = item.goals
                goalsRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].goals === item.goals) {
                        goalsRowSpan++
                    } else {
                        break
                    }
                }
                item.goalsRowSpan = goalsRowSpan
            } else {
                item.goalsRowSpan = 0
            }

            // 如果 month 变化，重置 monthRowSpan，并计算新的 rowSpan
            if (currentMonth !== item.month) {
                currentMonth = item.month
                monthRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].month === item.month) {
                        monthRowSpan++
                    } else {
                        break
                    }
                }
                item.monthRowSpan = monthRowSpan
            } else {
                item.monthRowSpan = 0
            }

            return item
        })
    }
    function resetGant() {
        state.gantFilter.projectId = undefined
        state.gantFilter.taskType = 'ALL'
        getGantData()
    }

    // 显示修改周工作汇报
    function showChangeWeek(column, record, id) {
        if (column.title === '关键路径任务' || column.title === '子目标') {
            return
        }
        // const { createBy, createById, createTime, delFlag, ...oldData } = record
        state.currentWeekData = record
        state.currentWeekData.id = id
        state.changeWeekTitle = column.title
        state.changeWeekVisible = true
        state.changeWeekValue = record[column.dataIndex]
        state.changeWeekKey = column.dataIndex
    }

    // 保存周
    function confirmWeek() {
        state.changeWeekLoading = true
        let value = state.currentWeekData[state.changeWeekKey]
        state.currentWeekData[state.changeWeekKey] = state.changeWeekValue
        post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/week_report', {
            'projectId': state.currentWeekData.id,
            'goalsId': state.currentWeekData.goalsIdIndex,
            'taskId': state.currentWeekData.taskIdIndex,
            'weekDate': state.changeWeekTitle,
            'overallProgressDescription': state.changeWeekValue
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                } else {
                    message.success(data.message)
                    state.changeWeekVisible = false
                    getData()
                }
            })
            .catch(err => {
                state.currentWeekData[state.changeWeekKey] = value
            })
            .finally(() => {
                state.changeWeekLoading = false
            })
    }

    // 显示更改目标
    function showChangeTarget(record) {
        state.changeTargetFrom = cloneDeep(record)
        state.changeTargetVisible = true
    }

    // 保存目标
    function confirmTarget() {
        put('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals', {
            ...state.changeTargetFrom,
            dateYear: state.searchForm.dateYear
        }).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            state.changeTargetVisible = false
            getData()
        })
    }

    function radioChange() {
        state.kbDataSource = []
        if (state.radioValue === '项目') {
            state.gantFilter.month = undefined
        } else {
            state.gantFilter.projectId = undefined
            const currentMonth = dayjs().format('YYYY-MM')
            state.gantFilter.month = currentMonth
        }
        getGantData()
    }

    function ganteCancel() {
        state.modalVisible = false
        state.gantFilter.month = undefined
        state.gantFilter.taskType = 'ALL'
        state.gantFilter.projectId = undefined
        state.kbDataSource = []
        state.kbDataSource = []
    }

    // 显示关联
    function showAssociate(record) {
        currentData.value = record
        getGlProjectList()
        // getjd()
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/quarter_related/search/${currentData.value.projectId}`
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.associatedProjectList = data.data
            if (state.associatedProjectList.length == 0) {
                state.associatedProjectList = [{ ...associatedProjectItem.value }]
            }
            state.associateVisible = true
        })
    }

    const associatedRef = ref(null)

    //     报存关联
    function confirmassociate() {
        associatedRef.value.validate().then(data => {
            state.associateLoading = true
            const params = state.associatedProjectList.map(item => {
                return {
                    ...item,
                    projectId: currentData.value.projectId
                }
            })
            post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/quarter_related', params)
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    state.associateVisible = false
                    getData()
                })
                .finally(() => {
                    state.associateLoading = false
                })
        })
    }

    //删除一个模块
    function handlerDeleteFormItem(index) {
        if (state.associatedProjectList.length == 1) {
            return
        }
        state.associatedProjectList.splice(index, 1)
    }

    // 新插一条模块
    function handlerAddFormItem(index) {
        if (index >= state.associatedProjectList.length - 1) {
            state.associatedProjectList.push({ ...associatedProjectItem })
        } else {
            // 否则使用 splice 方法在 index 后插入
            state.associatedProjectList.splice(index + 1, 0, { ...associatedProjectItem })
        }
    }

    //     获取季度
    function getjd() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/q_m_tree/search ').then(data => {
            state.jdList = data.data
        })
    }

    //     获取项目
    function getProjectList() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/search/related/${currentData.value.projectId} `
        ).then(data => {
            state.projectList = data.data
        })
    }

    //     获取关联项目项目
    function getGlProjectList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/search/${currentData.value.projectId} `).then(
            data => {
                state.glProjectList = data.data
            }
        )
    }

    // 计算两个日期之间的月份差
    const getMonthDifference = (startDate, endDate) => {
        const start = new Date(startDate + '-01') // 使用1号作为日期，方便处理
        const end = new Date(endDate + '-01')

        // 获取两个日期之间的月份差
        return (end.getFullYear() - start.getFullYear()) * 12 + end.getMonth() - start.getMonth()
    }

    //     列表重构
    function toggleCollapse(id) {
        if (isActive(id)) {
            // 如果当前面板是展开的，移除它的 ID
            state.collapseKey = state.collapseKey.filter(key => key !== id)
        } else {
            // 否则，将它的 ID 添加到 collapseKey 中
            state.collapseKey.push(id)
        }
    }
    function isActive(id) {
        return state.collapseKey.includes(id) // 检查该 ID 是否在 collapseKey 中
    }

    // 切换展开/折叠状态
    const toggleExpand = record => {
        record.expanded = !record.expanded
    }
    const toggleExpand1 = record => {
        console.log(record)
        record.expanded = !record.expanded
    }
    function handleExpandAll() {
        state.isExpandAll = true
        state.tableData.forEach(item => {
            state.collapseKey.push(item.projectId)
        })
        state.tableData.forEach(item => {
            console.log(item, 'item')
            item.projectTaskDtoList.forEach(child => {
                child.expanded = true
            })
        })
    }
    //     全部折叠
    function handleCollapseAll() {
        state.isExpandAll = false
        state.collapseKey = []
        state.tableData.forEach(item => {
            item.projectTaskDtoList.forEach(child => {
                child.expanded = false
            })
        })
    }

    const selectedMonth = ref(null) // Store selected month

    // 月份列表映射
    const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
    const monthsMap = {
        '1月': 'janGoalsList',
        '2月': 'febGoalsList',
        '3月': 'marGoalsList',
        '4月': 'aprGoalsList',
        '5月': 'mayGoalsList',
        '6月': 'junGoalsList',
        '7月': 'julGoalsList',
        '8月': 'augGoalsList',
        '9月': 'sepGoalsList',
        '10月': 'octGoalsList',
        '11月': 'novGoalsList',
        '12月': 'decGoalsList'
    }

    // 季度映射
    const monthToQuarter = {
        '1': 'Q1',
        '2': 'Q1',
        '3': 'Q1',
        '4': 'Q2',
        '5': 'Q2',
        '6': 'Q2',
        '7': 'Q3',
        '8': 'Q3',
        '9': 'Q3',
        '10': 'Q4',
        '11': 'Q4',
        '12': 'Q4'
    }

    // Get the goals for the selected month
    const getMonthGoals = (month, item) => {
        if (!month) return null
        const monthGoalsKey = monthsMap[month]
        return item[monthGoalsKey] || '暂无目标'
    }

    // Get the goals for the quarter based on the selected month
    const getQuarterGoals = target => {
        if (!target) return null
        return target
    }

    function showSetting() {
        state.settingVisible = true
    }
    function onMonthChange() {
        getData(true)
    }
    function formatColumns(column) {
        console.log(column)
        let newColumns = column.map(item => {
            return {
                ...item,
                children: item.children.map(child => {
                    return {
                        ...child,
                        width: '20px'
                    }
                })
            }
        })
        let newColumn = [
            ...baseListColumn.value,
            ...newColumns,
            {
                title: '操作',
                fixed: 'right',
                dataIndex: 'opration'
            }
        ]

        return newColumn.map(item => {
            return reactive({
                title: item.tilte,
                ...item,
                align: 'center',
                resizable: item.title == '操作' ? false : true,
                fixed: item.tilte == '子目标' || item.tilte == '关键路径任务' ? 'left' : ''
            })
        })
    }
    function handleTaskResizeColumn(w, col) {
        // 根据列标题来确定不同的 div
        const width = w - 10
        let div = null
        if (col.title === '任务名称') {
            div = document.querySelectorAll('.default-gant-title-rwmc')
        } else if (col.title.includes('项目阶段')) {
            div = document.querySelectorAll('.default-gant-title-xmjd')
        } else if (col.title === '总目标') {
            div = document.querySelectorAll('.default-gant-title-total')
        } else if (col.title === '子目标') {
            div = document.querySelectorAll('.default-gant-title-zmb')
        }

        // 如果找到了对应的 div，更新其宽度
        if (div.length > 0) {
            div.forEach(item => {
                item.style.width = `${width}px`
            })
        }
        col.width = w
    }
    function formattedMonthGoals(monthGoals) {
        return monthGoals?.replace(/\n/g, '<br>')
    }
    function formatText(text) {
        if (!text) return '--'
        return text.replace(/(\n|；)/g, '<br/>')
    }
    //     列表重构
    // 列宽调整函数
    const handleResizeColumn = (w, col) => {
        col.width = w // 更新列宽
    }
    const userListData = ref([])
    function getBaseUser() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pdtm/user_org').then(data => {
            const rawData = data.data
            markOrgNodesDisabled(rawData)
            console.log(rawData, 'adsdasdasdasdsad')
            userListData.value = convertUserTree(rawData)
        })
    }
    function markOrgNodesDisabled(nodes: any[]) {
        nodes.forEach(node => {
            if (node.type === 'ORG') {
                node.disabled = true
            }
            if (Array.isArray(node.children)) {
                markOrgNodesDisabled(node.children)
            }
        })
    }
    function fixTreeChildren(tree) {
        if (!Array.isArray(tree)) return []
        return tree.map(node => {
            const newNode = { ...node }
            if (newNode.children === null) {
                newNode.children = []
            } else if (Array.isArray(newNode.children)) {
                newNode.children = fixTreeChildren(newNode.children)
            }
            return newNode
        })
    }

    function convertUserTree(data) {
        return data.map(item => {
            const isUser = item.type === 'USER'
            const node: any = {
                label: item.name,
                value: isUser ? `${item.parentId}/${item.id}` : item.id, // 用户用 "组织ID/用户ID" 拼接
                disabled: item.disabled || false
            }

            if (!isUser && Array.isArray(item.children) && item.children.length > 0) {
                node.children = convertUserTree(item.children)
            }

            return node
        })
    }
    const selectedUserIds = computed(() => {
        return Array.from(new Set(state.searchForm.userList.map(v => v.split('/')[1])))
    })
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
        padding-right: 24px;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/

    .kb-table-box {
        position: relative;
        margin-bottom: 29px;
    }

    .load-btn {
        position: absolute;
        left: 50%;
        transform: translate(0, -50%);
        width: 120px;
        height: 16px;
        cursor: pointer;
        bottom: -20px;
    }

    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #d7e3ff;
        color: #262626;
        font-weight: 600;
        padding: 0;
    }

    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 0;

        .word-wrap {
            word-break: break-all !important;
        }
    }
    .target-table:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: #f5f8ff;
        color: #262626;
        font-weight: 600;
        padding: 0;
    }

    .target-table :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        padding: 0;

        .word-wrap {
            word-break: break-all !important;
        }
    }
    .color-div {
        position: relative;
        height: 26px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .line-table {
        position: absolute;
        top: -5px;
        height: 50px;
        left: 50%;
        background-color: #fff;
        width: 1px;
        border-left: 1px dashed #3875ff;
    }

    .div-item {
        flex: 1;
    }

    .top-search {
        height: 64px;
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 4px;
        padding: 16px 24px;
    }

    .bottom-div {
        padding: 16px;
        background-color: #fff;
        border-radius: 4px;
        height: 100%;
    }

    .bottom-title {
        display: flex;
        justify-content: space-between;
        height: 16px;
        border-left: 4px solid #3875ff;
        font-size: 16px;
        line-height: 16px;
        padding-left: 8px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 21px;
    }

    .modal-title {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }

    .left,
    .right {
        gap: 10px;
        display: flex;
        align-items: center;
    }

    .tip-color {
        display: flex;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        align-items: center;
        gap: 4px;
    }

    .box1,
    .box2,
    .box3 {
        width: 32px;
        height: 8px;
        background: #ffe58f;
    }

    .box2 {
        background: #c7f870;
    }

    .box3 {
        background: #fc4c29;
    }

    .weight-font {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        text-align: right;
        font-weight: 500;
    }

    .text-line-white {
        text-decoration: underline;
        text-underline: #fff;
    }

    .text-line-black {
        text-decoration: underline;
        text-underline: #262626;
    }

    .arrow-father {
        position: relative;
    }

    .arrow-icon {
        position: absolute;
        right: 20px;
        top: 1px;
        cursor: pointer;
    }

    .colun-today {
        position: relative;
    }

    .today-line {
        position: absolute;
        top: -23px;
        height: 50px;
        left: 47%;
        background-color: #fff;
        width: 1px;
        border-left: 1px dashed #3875ff;
    }

    .today-flag {
        position: absolute;
        top: -23px;
        left: -8px;
        width: 35px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        background-color: #3875ff;
        text-align: center;
        opacity: 0.6;
    }

    .add-btn {
        position: absolute;
        right: 40px;
        color: #3875ff;
        top: 5px;
    }

    .module-item {
        position: relative;
    }

    .del {
        width: 28px;
        color: #3875ff;
        position: absolute;
        right: 0;
        top: 5px;
    }

    .form-content {
        display: inline-block;
        width: calc(100% - 110px);
    }

    .son-title {
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        font-weight: 500;
    }

    .week-content {
        white-space: pre-line; /* 保留换行符和多余空格 */
        cursor: pointer;
        height: 30px;
        overflow: hidden;
    }

    .target-div {
        cursor: pointer;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        min-height: 20px;
        text-overflow: ellipsis;
    }

    .target-form :deep(.ant3-form-item-label) {
        width: 75px !important;
    }

    .default-goals {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .right-tip {
        height: 32px;
        line-height: 32px;
    }

    .week-tip,
    .right-tip-week {
        font-size: 14px;
        color: #262626;
        text-align: justify;
        font-weight: 400;
    }

    .default-gant-title {
        padding: 0 5px;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
    }
    .default-gant-title-xmjd,
    .default-gant-title-rwmc,
    .default-gant-title-total,
    .default-gant-title-zmb {
        padding: 0 5px;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
    }
    .default-gant-title-rwmc {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 300px;
    }
    /*.default-gant-title-total, .default-gant-title-zmb{
     white-space: wrap;
   }
   */

    .body {
        height: 100%;
    }

    .page_root {
        overflow: hidden !important;
    }

    .omit-div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .right-tip :deep(.ant3-select-selector) {
        overflow: auto;
        height: 32px;
    }

    /*重构*/
    .gd-item {
        margin: 5px;
        margin-bottom: 24px;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
    }
    /*折叠面板样式*/
    .collapse-title {
        position: relative;
        width: 100%;
        display: flex;
        height: 56px;
        padding: 15px 24px;
        background-image: linear-gradient(270deg, rgba(237, 243, 255, 0.5) 0%, #d7e3ff 100%);
        align-items: center;
        //box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
        /* 如果需要保留左右两角的圆角，可以在这里添加 border-radius 样式 */
    }
    .collapse-title-left {
        display: flex;
        width: 80%;
        gap: 8px;
        align-items: center;
        padding-right: 16px;
    }
    .father-right {
        max-width: 94%; /* 限制宽度 */
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 13px;
        justify-content: space-between;
    }
    .father-right-btn {
        display: flex;
        gap: 8px;
        justify-content: end;
    }

    :deep(.ant3-collapse-header) {
        padding: 0 !important;
        border: none !important;
        color: #262626 !important;
        background: rgba(56, 117, 255, 0.1);
    }
    .active-icon {
        color: #3875ff;
        transform: rotate(90deg);
    }

    .title-text {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
    }

    .title-icon {
        background-image: url('http://10.40.0.33:9001/file-storage/480680058727917568-source.png');
        background-size: cover;
        height: 16px;
        width: 16px;
    }

    .item-inner {
        background-color: #fff;
        padding: 16px 24px;
        display: flex;
        flex-direction: column;
    }

    .inner-item {
        margin-bottom: 16px;
        display: flex;
    }

    .item-left {
        text-align: right;
        width: 100px;
    }

    .item-right {
        flex: 1;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    :deep(.ant3-collapse-borderless > .ant3-collapse-item > .ant3-collapse-content > .ant3-collapse-content-box) {
        padding: 0 !important;
    }

    .table-top-title {
        display: flex;
        gap: 24px;
    }

    .table-top-title-text {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: right;
        font-weight: 400;
    }

    .check-target {
        padding: 16px 0;
        border-bottom: 1px solid #3875ff;
        margin-bottom: 16px;
    }

    .scroll-content {
        overflow-y: auto;
        overflow-x: hidden;
        height: calc(100vh - 240px);
    }

    .item-right p {
        margin: 0;
    }
    .active-btn {
        position: relative;
        top: 2px;
        cursor: pointer;
    }
    .ratio-text {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 500;
    }
    .no-data-msg {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #595959;
    }
    .no-data-img {
        background-image: url('http://10.40.0.33:9001/file-storage/431370789385246720.png');
        background-size: cover;
        width: 264px;
        height: 192px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .week-title {
        text-decoration: underline;
    }
    /*重构*/
    /*样式*/
</style>
